<template>
	<div>
		<el-form ref="form" label-width="80px">
			<el-form-item label="SPU名称">{{spu.spuName}}</el-form-item>
			<el-form-item label="SKU名称">
				<el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
			</el-form-item>
			<el-form-item label="价格(元)">
				<el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
			</el-form-item>
			<el-form-item label="重量(千克)">
				<el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
			</el-form-item>
			<el-form-item label="规格描述">
				<el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
			</el-form-item>
			<el-form-item label="平台属性">
				<el-form :inline="true" label-width="80px">
					<el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id" class="platForm">
						<!-- 收集attr的id和attrValue的id到attr对象属性上 -->
						<el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
							<!-- value收集数据 label 展示数据 -->
							<el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" 
							:key="attrValue.id"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-form-item>
			<el-form-item label="销售属性">
				<el-form :inline="true" label-width="80px">
					<el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
						<el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
							<el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" 
							v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" 
							:key="saleAttrValue.id"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-form-item>
			<el-form-item label="图片列表">
				<el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" prop="prop" width="80">
					</el-table-column>
					<el-table-column width="width" prop="prop" label="图片">
						<!-- 作用域插槽 -->
						<template slot-scope="{row,$index}">
							<img :src="row.imgUrl" style="width: 100px;height: 100px">
						</template>
					</el-table-column>
					<el-table-column width="width" prop="imgName" label="名称">
					</el-table-column>
					<el-table-column width="width" prop="prop" label="操作">
						<template slot-scope="{row,$index}">
							<el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">
								设置默认
							</el-button>
							<el-button v-else>默认</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
				<el-button @click="cancel">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		name: "SkuForm",
		data() {
			return {
				// 存储图片信息
				spuImageList: [],
				// 存储销售属性
				spuSaleAttrList: [],
				// 存储平台属性数组
				attrInfoList: [],
				// 收集SKU数据
				skuInfo: {
					//第一类收集的数据：父组件给的数据
					category3Id: 0,
					spuId: 0,
					tmId: 0,
					//第二类：需要通过数据双向绑定v-model收集
					skuName: "",
					price: 0,
					weight: "",
					skuDesc: "",
					//第三类：需要自己书写代码
					//默认图片
					skuDefaultImg: "",
					//收集图片的字段
					skuImageList: [
						// {
						//   id: 0,
						//   imgName: "string",
						//   imgUrl: "string",
						//   isDefault: "string",
						//   skuId: 0,
						//   spuImgId: 0,
						// },
					],
					//平台属性
					skuAttrValueList: [
						// {
						//   attrId: 0,
						//   valueId: 0,
						// },
					],
					//销售属性
					skuSaleAttrValueList: [
						// {
						//   id: 0,
						//   saleAttrId: 0,
						//   saleAttrName: "string",
						//   saleAttrValueId: 0,
						//   saleAttrValueName: "string",
						//   skuId: 0,
						//   spuId: 0,
						// },
					],
				},
				spu:{},
				// 收集图片数据字段 此处收集数据缺少isDefault字段 提交时需要整理参数
				imageList:[]
			}
		},
		methods: {
			// 获取SKUform数据
			async getData(category1Id, category2Id, spu) {
				this.spu = spu;
				// 获取图片数据
				let result = await this.$API.spu.reqSpuImageList(spu.id)
				// console.log(result)
				if (result.code == 200) {
					let list = result.data
					list.forEach(item=>{
						// 添加isDefault属性
						item.isDefault = 0;
					})
					this.spuImageList = list
				}
				// 获取销售属性数据
				let result1 = await this.$API.spu.reqSpuSaleAttrList(spu.id)
				if (result1.code == 200) {
					// console.log(result1)
					this.spuSaleAttrList = result1.data
				}
				// 获取平台属性数据
				let result2 = await this.$API.spu.reqAttrInfoList(category1Id, category2Id, spu.category3Id)
				// console.log(result2)
				if (result2.code == 200) {
					this.attrInfoList = result2.data
				}
			},
			// table表格复选框按钮事件
			handleSelectionChange(params){
				// console.log(params)
				// 获取用户选择图片信息
				// 但选择数据缺少isDefault字段
				this.imageList = params
			},
			// 排他操作
			changeDefault(row){
				this.spuImageList.forEach(item=>{
					item.isDefault = 0
				})
				// 点击的图片数据变为1
				row.isDefault = 1
				// 收集默认图片地址
				this.skuInfo.skuDefaultImg = row.imgUrl
			},
			cancel(){
				// 自定义事件 让父组件切换场景为0
				this.$emit('changeScenes',0)
				// 点击取消时清除数据
				Object.assign(this._data,this.$options.data())
			},
			// 保存按钮事件
			async save(){
				// 整理参数
				// 平台属性参数整理
				const {attrInfoList,skuInfo,spuSaleAttrList,imageList} = this
				// ways1 新建数组
				// let arr = []
				// attrInfoList.forEach(item=>{
				// 	// 当前平台用户进行了选择
				// 	if(item.attrIdAndValueId){
				// 		// 将字符串整理为对象 解构
				// 		const [attrId,valueId] = item.attrIdAndValueId.split(':')
				// 		let obj = {attrId,valueId}
				// 		arr.push(obj)
				// 	}
				// })
				// 将整理好的参数赋值给SKUInfo的 SKUAttrValueList
				// skuInfo.skuAttrValueList = arr
				// ways2
				skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
					if(item.attrIdAndValueId){
						const [attrId,valueId] = item.attrIdAndValueId.split(':')
						// 用户被选择
						prev.push({attrId,valueId})
					}
					return prev
				},[]);
				// console.log(skuInfo.skuAttrValueList)
				// 整理销售属性
				skuInfo.skuSaleAttrValueList =  spuSaleAttrList.reduce((prev,item)=>{
					if(item.attrIdAndValueId){
						const [saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(':')
						prev.push({saleAttrId,saleAttrValueId})
					}
					return prev
				},[])
				// 整理图片数据
				// console.log(imageList)
				// 利用已有数组映射出新数组
				skuInfo.skuImageList = imageList.map(item=>{
					return {
						imgName:item.imgName,
						imgUrl:item.imgUrl,
						isDefault:item.isDefault,
						spuImgId:item.id
					}
				});
				// 发请求
				let result = await  this.$API.spu.reqAddSku(skuInfo)
				// console.log(result) 
				// 此处服务器只返回成功与否
				if(result.code == 200){
					this.$emit('changeScenes',0)
					this.$message({
						type:'success',
						message:'添加SKU成功'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.platForm{
		margin-bottom: 10px;
	}
</style>
